<template>
    <div class="apply">
        <div>
            <div class="fill-in">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1.5rem" :show-message="false"
                         :label-position="'top'" class="form clearfix">
                    <el-form-item label="姓名" prop="name">
                        <el-input placeholder="请输入姓名" v-model="ruleForm.name" @blur="$method.inputBlur()"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="cardId">
                        <el-input placeholder="请输入身份证号" v-model="ruleForm.cardId"
                                  @blur="$method.inputBlur()"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone" class="is-required">
                        <el-input placeholder="请输入手机号码" v-model="ruleForm.phone" type="number"
                                  @blur="$method.inputBlur()"></el-input>
                    </el-form-item>
                    <el-form-item label="当前居住地所在地区" prop="localArea">
                        <group class="form-group">
                            <x-address title="" :value-text-align="'left'" v-model="ruleForm.localArea"
                                       :list="addressData"
                                       placeholder="请选择地址" ref="localArea" :show.sync="showPopupPickerAddr"
                                       v-show="false"></x-address>
                        </group>
                        <div @click="showPopupPickerAddr = true" class="padd">
                            <span v-if="!ruleForm.localArea[0]" class="placeholder">请选择</span>
                            <span v-if="$refs.localArea">{{$refs.localArea.nameValue}}</span>
                            <i class="el-icon-arrow-right"></i>
                        </div>
                    </el-form-item>
                    <el-form-item label="当前居住地详址" prop="localAddress">
                        <el-input placeholder="请输入住址" v-model="ruleForm.localAddress"
                                  @blur="$method.inputBlur()"></el-input>
                    </el-form-item>
                    <el-form-item label="所属科室" prop="department" class="department" v-if="role==3">
                        <div @click="showDept">
                            <span v-if="!ruleForm.department" class="placeholder">请选择</span>
                            <span v-else>
                                {{ruleForm.department.name}}
                                <!--                                {{$refs.department && $refs.department.getNameValues()}}-->
                            </span>
                            <i class="el-icon-arrow-right"></i>
                        </div>
                        <!--                        <popup-picker title="" :data="departmentData" v-model="ruleForm.department" :columns="1"-->
                        <!--                                      ref="department"-->
                        <!--                                      :placeholder="'请选择'" :show.sync="showPopupPicker" v-show="false"></popup-picker>-->
                    </el-form-item>
                    <div class="title">流行病学接触史</div>
                    <el-form-item :label="timeBefore() + '是否接触过武汉及周边地区人员'" prop="healthTouchWuhan">
                        <group class="form-group">
                            <checklist :options="whetherList" v-model="ruleForm.healthTouchWuhan" class="checklist"
                                       :max="1"></checklist>
                        </group>
                    </el-form-item>
                    <el-form-item :label="timeBefore() + '是否接触新冠肺炎确诊/疑似病人'" prop="healthTouchPatient">
                        <group class="form-group">
                            <checklist :options="whetherList" v-model="ruleForm.healthTouchPatient" class="checklist"
                                       :max="1"></checklist>
                        </group>
                    </el-form-item>
                    <el-form-item :label="timeBefore() + '是否去过有病例报告的地区'" prop="healthTouchAddrDanger">
                        <group class="form-group">
                            <checklist :options="whetherList" v-model="ruleForm.healthTouchAddrDanger" class="checklist"
                                       :max="1"></checklist>
                        </group>
                    </el-form-item>

                    <div class="title">健康信息</div>
                    <el-form-item label="当前健康状态（可多选）" prop="healthAbnormalDetail">
                        <group class="form-group">
                            <checklist :options="healthList" v-model="ruleForm.healthAbnormalDetail" class="checklist"
                                       :max="8"></checklist>
                        </group>
                    </el-form-item>

                    <div v-if="role==1">
                        <div class="extend">
                            <div class="head">陪同家属信息（无陪同家属则不需要填写）</div>
                            <div class="extend-list" v-for="(list,index) in relationList" :key="index">
                                <span class="name ellipsis">{{list.name}}</span>
                                <span class="phone ellipsis">{{list.phone}}</span>
                                <span class="remove" @click="remove(relationList,index)"><i
                                    class="el-icon-remove"></i></span>
                            </div>
                            <div class="add-address">
                                <el-link :underline="false" type="primary" @click="addExtend(role)">+ 新增一条</el-link>
                            </div>
                        </div>
                    </div>
                    <div v-if="role==2">
                        <div class="extend">
                            <div class="head">患者信息</div>
                            <div class="extend-list" v-for="(list,index) in patientList" :key="index">
                                <span class="name ellipsis">{{list.name}}</span>
                                <span class="phone ellipsis">{{list.phone}}</span>
                                <span class="remove" @click="remove(patientList,index)"><i
                                    class="el-icon-remove"></i></span>
                            </div>
                            <div class="add-address">
                                <el-link :underline="false" type="primary" @click="addExtend(role)">+ 新增一条</el-link>
                            </div>
                        </div>
                    </div>
                </el-form>
            </div>
            <el-button-group class="submit clearfix">
                <div class="primary" @click="submitForm('ruleForm')">提交</div>
            </el-button-group>
        </div>
        <confirm v-model="showConfirm" confirm-text="确认提交" cancel-text="返回修改" class="apply-confirm"
                 @on-confirm="submit()">
            <!-- <div class="prompt">提交后不能修改，是否继续</div> -->
            <div class="confirm-info" v-if="showConfirm">
                <div class="clearfix">
                    <div class="label">姓名：</div>
                    <div class="cont">{{ruleForm.name}}</div>
                </div>
                <div class="clearfix">
                    <div class="label">身份证号：</div>
                    <div class="cont">{{ruleForm.cardId}}</div>
                </div>
                <div class="clearfix">
                    <div class="label">手机号：</div>
                    <div class="cont">{{ruleForm.phone}}</div>
                </div>
                <div class="clearfix">
                    <div class="label">当前所在地区：</div>
                    <div class="cont">{{$refs.localArea.nameValue}}</div>
                </div>
                <div class="clearfix">
                    <div class="label">当前现住详址：</div>
                    <div class="cont">{{ruleForm.localAddress}}</div>
                </div>
            </div>
        </confirm>
        <confirm v-model="showEextendConfirm" confirm-text="确认" cancel-text="取消" class="extend-confirm"
                 @on-confirm="extendSubmit()" :close-on-confirm="false">
            <div class="header">{{extendHeader}}</div>
            <div class="info">
                <el-form :model="extendForm" :rules="extendRules" ref="extendForm" label-width="1.5rem"
                         :show-message="false"
                         :label-position="'top'" class="form">
                    <el-form-item label="姓名" prop="name">
                        <el-input placeholder="请输入姓名" v-model="extendForm.name"
                                  @blur="$method.inputBlur()"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone" class="is-required">
                        <el-input placeholder="请输入手机号码" v-model="extendForm.phone" type="number"
                                  @blur="$method.inputBlur()"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </confirm>
        <form name="imgForm" style="display:none;"></form>
        <router-view @chooseDept="chooseDept" @init="init"></router-view>
    </div>
</template>

<script>
    import {Checklist, Selector, Group, PopupPicker, XAddress, ChinaAddressV4Data, Confirm, Datetime} from 'vux'
    import {mapGetters} from 'vuex'

    export default {
        data() {
            let _this = this, phoneRule = /^1[34578]\d{9}$/,
                validateAppointmentTime = (rule, value, callback) => {
                    if (_this.role !== 3 && !value) {
                        callback(new Error('请选择预约时间'))
                    } else {
                        callback()
                    }
                },
                validatePhone = (rule, value, callback) => {
                    if (!value) {
                        callback(new Error('请填写手机号'))
                    } else if (!phoneRule.test(value)) {
                        callback(new Error('手机号格式错误'))
                    } else {
                        callback()
                    }
                }
            return {
                ruleForm: {
                    name: '',
                    cardType: '1',
                    cardId: '',
                    healthAbnormalDetail: [], // 健康状况
                    localArea: [], // 本市区县街道
                    localAddress: '', // 本市居住详址
                    phone: '',
                    department: '', // 科室
                    appointmentTime: '',
                    healthTouchWuhan: [], // 是否有接触
                    healthTouchPatient: [], // 是否有接触
                    healthTouchAddrDanger: [] // 是否有接触
                },
                rules: {
                    name: [
                        {required: true, message: '请填写姓名', trigger: 'blur'}
                    ],
                    phone: [
                        {validator: validatePhone, trigger: 'blur'}
                    ],
                    cardId: [
                        {required: true, message: '请填写身份证号', trigger: 'blur'}
                    ],
                    appointmentTime: [
                        {validator: validateAppointmentTime, trigger: 'change'}
                    ],
                    localArea: [
                        {required: true, message: '请选择本市居住地所在地区', trigger: 'change'}
                    ],
                    localAddress: [
                        {required: true, message: '请填写本市居住地详址', trigger: 'blur'}
                    ],
                    department: [
                        {required: true, message: '请选择科室', trigger: 'change'}
                    ],
                    healthAbnormalDetail: [
                        {required: true, message: '请选择健康状况', trigger: 'change'}
                    ],
                    healthTouchWuhan: [
                        {required: true, message: '请选择接触史', trigger: 'change'}
                    ],
                    healthTouchPatient: [
                        {required: true, message: '请选择接触史', trigger: 'change'}
                    ],
                    healthTouchAddrDanger: [
                        {required: true, message: '请选择接触史', trigger: 'change'}
                    ]
                },
                departmentData: [],
                showPopupPicker: false,
                showPopupPickerAddr: false,
                minYear: (new Date()).getFullYear(),
                leaveAddressList: [],
                relationList: [], // 家属信息
                patientList: [], // 患者信息

                extendForm: {
                    name: '',
                    phone: ''
                },
                extendRules: {
                    name: [
                        {required: true, message: '请填写姓名', trigger: 'blur'}
                    ],
                    phone: [
                        // {required: true, message: '请填写手机号', trigger: 'blur'}
                        {validator: validatePhone, trigger: 'blur'}
                    ]
                },

                whetherList: [
                    {key: '是', value: '是'},
                    {key: '否', value: '否'}
                ],
                healthList: [
                    {key: '无异常', value: '无异常'},
                    {key: '发热（体温≥37.3℃）', value: '发热（体温≥37.3℃）'},
                    {key: '乏力', value: '乏力'},
                    {key: '干咳', value: '干咳'},
                    {key: '鼻塞', value: '鼻塞'},
                    {key: '流涕', value: '流涕'},
                    {key: '咽痛', value: '咽痛'},
                    {key: '腹泻', value: '腹泻'}
                ],
                promiseList: [
                    {key: '1', value: '为疫情防控，本人同意以上信息依法提交所在辖区疫情防控部门统筹管理。'},
                    {
                        key: '2',
                        value: '上述信息是我本人填写,本人对信息内容的真实性和完整性负责。如果信息有误或缺失,本人愿意' +
                            '承担相应法律责任。同时,本人保证遵守防疫管控的各项规定,配合并听从各项措施和要求。'
                    }
                ],
                addressData: ChinaAddressV4Data,
                showConfirm: false,
                showEextendConfirm: false,
                tripPassAddr: [],
                visibility: false,
                extendHeader: '',
                role: '', // 身份类型
                step: 1,
                idCardMessage: {}, // 身份证信息
                positive: {},
                srcListPositive: [],
                fileListReverse: [],
                reverse: {},
                srcListReverse: [],
                modifyType: '',
                hasGetLast: false
            }
        },
        computed: {
            ...mapGetters([
                'user'
            ])
        },
        mounted() {
            this.init()
            this.getDepartmentData()
            this.$method.wxConfig()
        },
        methods: {
            // 修改信息接口
            getInfoData() {
                this.$http.get('/healthcode/lastApplyInfo').then(result => {
                    this.hasGetLast = true
                    if (result.success && result.data) {
                        this.ruleForm.name = result.data.name
                        this.ruleForm.cardId = result.data.cardId
                        this.ruleForm.phone = result.data.phone
                        this.ruleForm.localArea = [result.data.tripAddr.regionProvince,
                            result.data.tripAddr.regionCity,
                            result.data.tripAddr.regionArea]
                        this.ruleForm.localAddress = result.data.tripAddr.addr
                        this.ruleForm.department = (result.data.hsDepartment && result.data.hsDepartment.id) ? result.data.hsDepartment : ''
                        this.ruleForm.healthTouchWuhan = [result.data.healthTouchWuhan]
                        this.ruleForm.healthTouchPatient = [result.data.healthTouchPatient]
                        this.ruleForm.healthTouchAddrDanger = [result.data.healthTouchAddrDanger]
                        this.ruleForm.healthAbnormalDetail = result.data.healthAbnormalDetail
                    }
                })
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        this.$vux.toast.text(obj[Object.keys(obj)[0]][0].message, 'middle')
                        return false
                    }
                })
            },
            submitForm(formName) {
                this.validate('ruleForm', () => {
                    if (this.role === 2 && !this.patientList[0]) {
                        this.$vux.toast.text('请填写患者信息', 'middle')
                    } else {
                        this.showConfirm = true
                    }
                })
            },
            getDepartmentData() {
                this.$http.get('/index/hsDepartmentData').then(result => {
                    if (result.success) {
                        this.departmentData = result.data
                    }
                })
            },
            submit() {
                let _this = this,
                    // idCardImg = [this.positive.uuid, this.reverse.uuid],
                    params = {
                        type: this.role,
                        cardId: this.ruleForm.cardId, // 证件号
                        cardType: this.ruleForm.cardType, // 证件类型
                        // idCardImg: idCardImg,
                        hsDepartmentId: this.ruleForm.department.id,
                        healthTouchWuhan: this.ruleForm.healthTouchWuhan[0], // 是否有接触
                        healthTouchPatient: this.ruleForm.healthTouchPatient[0], // 是否有接触
                        healthTouchAddrDanger: this.ruleForm.healthTouchAddrDanger[0], // 是否有接触
                        healthAbnormalDetail: this.ruleForm.healthAbnormalDetail, // 健康状况
                        name: this.ruleForm.name, // 姓名
                        phone: this.ruleForm.phone, // 手机号
                        tripAddr: {
                            area: this.$refs.localArea.nameValue, // 本市区县街道
                            addr: this.ruleForm.localAddress, // 本市居住详址
                            regionProvince: this.ruleForm.localArea[0],
                            regionCity: this.ruleForm.localArea[1],
                            regionArea: this.ruleForm.localArea[2]
                        }
                    }
                if (this.role === 1 && this.relationList[0]) {
                    params.familyMember = this.relationList
                } else if (this.role === 2 && this.patientList[0]) {
                    params.familyMember = this.patientList
                }
                if (this.role !== 3) {
                    params.appointmentTime = this.$filter.timeFormat(this.ruleForm.appointmentTime, 'YYYY-MM-DD HH:mm:ss') // 预约时间
                }
                this.$http.post('/healthcode/apply', params).then(result => {
                    if (result.success) {
                        this.$router.replace('/code')
                        _this.$refs.ruleForm.resetFields()
                        for (let i = 0; i < _this.leaveAddressList.length; i++) {
                            _this.$refs['detailList' + i].resetFields()
                        }
                    }
                })
            },
            extendSubmit() {
                this.validate('extendForm', () => {
                    let obj = {name: this.extendForm.name, phone: this.extendForm.phone}
                    if (this.role === 1) {
                        this.relationList.push(obj)
                    } else if (this.role === 2) {
                        this.patientList.push(obj)
                    }
                    this.showEextendConfirm = false
                })
            },
            tripChange(value) {
                if (value[0] === '是') {
                    if (this.leaveAddressList.length < 1) this.addAddress()
                } else {
                    this.leaveAddressList = []
                }
            },
            addAddress() {
                this.leaveAddressList.push({
                    area: [],
                    address: ''
                })
            },
            remove(list, index) {
                this.$vux.confirm.show({
                    content: '是否确认删除',
                    onConfirm() {
                        list.splice(index, 1)
                    }
                })
            },
            addExtend() {
                if (this.role === 1) {
                    this.extendHeader = '添加家属信息'
                } else {
                    this.extendHeader = '添加患者信息'
                }
                this.showEextendConfirm = true
                this.$nextTick(() => {
                    this.$refs.extendForm.resetFields()
                })
            },
            addList(list) {
                list.push({
                    name: '',
                    phone: ''
                })
            },
            timeBefore() {
                let date = new Date()
                date -= 3600 * 24 * 14 * 1000
                return this.$filter.timeFormat(date, 'MM.DD') + '至今'
            },
            goUpload() {
                this.$router.push({
                    path: '/apply/uploadCardId',
                    query: {}
                })
            },
            showDept() {
                this.$router.push({
                    path: this.$route.path + '/department',
                    query: {
                        role: this.role,
                        modifyType: this.modifyType,
                        isChildren: true
                    }
                })
                // this.showPopupPicker = true
            },
            chooseDept(item) {
                this.init()
                if (item) this.ruleForm.department = item
            },
            init(callback) {
                if (this.$route.query.role && !this.role) this.role = Number(this.$route.query.role)
                if (this.$route.query.modifyType && !this.modifyType) this.modifyType = Number(this.$route.query.modifyType)
                if (this.user && this.user.phone) this.ruleForm.phone = this.user.phone
                if (this.modifyType === 1) {
                    this.role = 3
                    if (!this.hasGetLast) this.getInfoData()
                }
            },

            // 身份证上传相关
            clearImg(type) {
                if (type === 'positive') {
                    this.positive = {}
                    this.idCardMessage.name = ''
                    this.idCardMessage.idnumber = ''
                    this.idCardMessage.address = ''
                } else {
                    this.reverse = {}
                    this.idCardMessage.effective_date = ''
                    this.idCardMessage.expire_date = ''
                }
            },
            loadImage() {
                this.$nextTick(() => {
                    this.$previewRefresh()
                })
            },
            parseIdCard(id) {
                this.$http.get('/healthcode/parseIdCard?fileId=' + id).then(result => {
                    if (result.success) {
                        let message = result.data.response[0], newMessage,
                            objectFilter = this.$filter.objectFilter()
                        newMessage = objectFilter(message, value => value)
                        this.idCardMessage = {...this.idCardMessage, ...newMessage}
                    }
                })
            },

            // 微信图片上传
            chooseImage(type) {
                let _this = this

                this.$wechat.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        _this.getLocalImgData(res.localIds[0], type)
                        _this.$vux.loading.show()
                    }
                })
            },
            getLocalImgData(localId, type) {
                let _this = this
                this.$wechat.getLocalImgData({
                    localId: localId, // 图片的本地ID
                    success: (res) => {
                        var localData = res.localData // localData是图片的base64数据，可以用img标签显示
                        if (localData.indexOf('data:image') !== 0) {
                            localData = 'data:image/jpeg;base64,' + localData
                        }
                        let form = document.imgForm,
                            formData = new FormData(form),
                            fileName = new Date().getTime() + '.jpeg'
                        formData.append('file', _this.$filter.dataURLtoFile(localData, fileName))
                        _this.fileUpload(formData, type)
                    },
                    fail: function () {
                        _this.$vux.loading.hide()
                    }
                })
            },
            fileUpload(formData, type) {
                this.$vux.loading.show()
                this.$nextTick(() => {
                    this.$http.post('/file/upload?type=idcard',
                        formData,
                        {headers: {'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryU9T56J8eIqTBGRQH'}}
                    ).then(result => {
                        if (result.success) {
                            this.$vux.loading.hide()
                            if (type === 'positive') {
                                // 身份证正面
                                this.positive = result.data
                            } else {
                                // 身份证反面
                                this.reverse = result.data
                            }
                            this.parseIdCard(result.data.uuid)
                            this.$nextTick(() => {
                                this.$previewRefresh()
                            })
                        }
                    }).catch(() => {
                        this.$vux.loading.hide()
                    })
                })
            }
        },
        components: {
            Checklist,
            Selector,
            Group,
            XAddress,
            Confirm,
            Datetime,
            PopupPicker
        }
    }
</script>

<style scoped lang="less">
    .steps {
        display: flex;
        text-align: center;
        background-color: #E7EDFB;
        padding: .15rem 10%;
        height: 1.06rem;
        /*position: fixed;*/
        /*top: 0;*/
        /*left: 0;*/
        /*width: 100%;*/

        .step {
            flex: 1;
            position: relative;
            overflow: hidden;
            font-size: .26rem;
            line-height: .36rem;

            &:before {
                content: '';
                position: absolute;
                top: .16rem;
                left: 0;
                width: 100%;
                height: .02rem;
                background-color: #999;
                z-index: 0;
            }

            .num {
                height: .32rem;
                line-height: .32rem;
                margin-bottom: .08rem;

                span {
                    display: inline-block;
                    width: .32rem;
                    height: .32rem;
                    text-align: center;
                    background-color: #999;
                    border-radius: 50%;
                    font-size: .2rem;
                    color: #fff;
                    position: relative;
                    z-index: 1;
                }
            }

            &:last-child {
                &:before {
                    left: -50%;
                    margin-left: -.24rem;
                }
            }

            &:first-child {
                &:before {
                    left: 50%;
                    margin-left: .24rem;
                }
            }

            &.active {
                color: #729BFF;

                span {
                    background-color: #729BFF;
                }
            }
        }
    }

    .padd {
        padding: 0 .2rem;

        .placeholder {
            color: #999;
        }

        i {
            float: right;
            margin-top: .1rem;
        }
    }

    .apply {
        background-color: #f4f4f4;
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        padding-bottom: .86rem;
        /*padding-top: 1.06rem;*/

        .title {
            line-height: .76rem;
            padding: 0 .2rem;
            color: #999;

            &.mt {
                margin-top: -.15rem;
            }

            .rt {
                float: right;
            }

            .link {
                color: #028CFC;
            }
        }

        /deep/ .apply-confirm {
            .weui-dialog__bd:first-child {
                padding: .3rem .4rem .5rem;
            }

            .prompt {
                line-height: .68rem;
                font-size: .3rem;
                margin-bottom: .2rem;
                color: #ff0000;
            }

            .confirm-info {
                margin-top: .3rem;
                text-align: left;

                > div {
                    margin-bottom: .1rem;
                    font-size: .28rem;
                    line-height: .36rem;
                }

                .label {
                    float: left;
                }
            }
        }

        /deep/ .extend-confirm {
            .weui-dialog__bd:first-child {
                padding: .3rem .1rem;
            }

            .header {
                margin-bottom: .3rem;
            }

            .form {
                text-align: left;

                .el-form-item {
                    margin-bottom: 0;
                    border-bottom: 1px solid #e9e9e9;

                    &:last-child {
                        border-bottom: 0 none;
                    }
                }
            }
        }

        /deep/ .card-box {

            .upload-box {
                padding-bottom: .3rem;
                background-color: #fff;

                .title {
                    color: #333;
                }

                .box {
                    display: flex;
                    width: 100%;

                    .upload {
                        position: relative;
                        overflow: hidden;
                        height: 2rem;
                        border-radius: .2rem;
                        flex: 1;
                        padding: 0 .2rem;

                        > div {
                            width: 100%;
                            height: 100%;
                        }

                        .el-upload, .uploadimg {
                            width: 100%;
                            height: 100%;
                        }

                        .img-box {
                            position: absolute;
                            left: 0;
                            right: 0;
                            top: 0;
                            bottom: 0;
                            width: 100%;
                            height: 100%;
                            background-color: #fff;
                            padding: 0 .2rem;
                        }

                        .iconClear {
                            position: absolute;
                            top: 0;
                            right: 0;
                            width: .72rem;
                            height: .72rem;
                            line-height: .72rem;
                            text-align: center;

                            i {
                                font-size: .4rem;
                                color: #999;
                            }
                        }
                    }
                }
            }
        }

        /deep/ .fill-in {
            .extend-list {
                padding: 0 .2rem;
                line-height: .68rem;
                overflow: hidden;
                border-bottom: 1px solid #eee;

                .name, .phone {
                    float: left;
                    width: 35%;
                }

                .remove {
                    float: right;

                    i {
                        font-size: .32rem;
                        color: #ff6464;
                    }
                }
            }

            .add-address {
                margin-top: -.1rem;
                background-color: #fff;
                text-align: center;
                margin-bottom: .15rem;
                line-height: .68rem;
            }

            .extend {
                background: #fff;

                .head {
                    line-height: .76rem;
                    padding: 0 .2rem;
                }

                .add-address {
                    margin-top: .15rem;
                }
            }

            .info {
                margin-bottom: .15rem;
                margin-top: 0;

                .label {
                    color: #333;
                }
            }
        }

    }

    .info {
        margin-top: .2rem;
        padding: .2rem;
        background-color: #fff;

        > div {
            min-height: .48rem;
            line-height: .48rem;
            margin: .1rem 0;
            overflow: hidden;

            .label {
                float: left;
                width: 1.6rem;
                color: #999;
            }

            .label + div {
                text-align: left;
                position: relative;
                margin-left: 1.6rem;
            }
        }
    }

    .form {
        /deep/ .el-form-item {
            font-size: .28rem;
            /*border-bottom: 1px solid #ddd;*/
            background-color: #fff;
            margin-bottom: .15rem;
            padding: .1rem 0;

            /*&.department {*/
            /*    padding: .15rem 0;*/

            /*    .el-form-item__label {*/
            /*        float: left;*/
            /*    }*/

            /*    .el-form-item__content {*/
            /*        text-align: right;*/

            /*        .placeholder {*/
            /*            color: #999;*/
            /*        }*/
            /*    }*/
            /*}*/

            &.department {
                .el-form-item__content {
                    line-height: .68rem;
                    padding: 0 .2rem;

                    .placeholder {
                        color: #999;
                    }

                    i {
                        float: right;
                        height: .68rem;
                        line-height: .68rem;
                    }
                }
            }

            .el-form-item__label {
                color: #333;
                padding: 0 0 0 .2rem;
                font-size: .28rem;
                line-height: .48rem;
            }

            .el-form-item__content {
                position: relative;
                font-size: .28rem;
                line-height: .5rem;
            }

            .el-radio-group {
                padding: 0 .2rem;
                width: 100%;

                .el-radio {
                    width: 100%;
                    font-size: .28rem;
                    line-height: .48rem;
                    white-space: normal;
                    margin-right: 0;
                    margin-bottom: .1rem;
                }
            }

            .selector {
                padding: .1rem .2rem;
                line-height: .48rem;

                .weui-select {
                    padding-left: 0;
                    height: .48rem;
                    line-height: .48rem;
                    font-size: .28rem;
                }
            }

            .weui-cells_checkbox {
                .weui-icon-checked {
                    &:before {
                        font-size: .34rem;
                    }
                }

                .weui-check:checked + .vux-checklist-icon-checked {
                    &:before {
                        color: #409EFF;
                    }
                }
            }

            .el-input {
                font-size: .28rem;

                input {
                    padding: 0 .2rem;
                    border: 0 none;
                    height: .68rem;
                    line-height: .68rem;
                    border-radius: 2px;
                    /*border-color: rgba(255, 184, 203);*/
                }
            }

            .el-button {
                font-size: .28rem;
            }

            .form-group {
                .weui-cells {
                    &:before, &:after {
                        border: 0 none;
                    }

                    margin-top: 0;
                    font-size: .28rem;

                    .weui-cell {
                        padding: .15rem .2rem;

                        &:before {
                            border: 0 none;
                        }
                    }

                    .vux-cell-value {
                        color: inherit;
                    }
                }
            }

            &.form-item-top {
                margin-top: -.2rem;
                border-top: 1px solid #eee;
            }

            &.is-error {
                input {
                    /*background-color: rgba(255, 184, 203, .3);*/
                    /*border: 1px solid rgba(255, 184, 203);*/
                }
            }
        }
    }

    .submit {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: .88rem;
        line-height: .88rem;
        z-index: 5;

        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            box-shadow: 0 0 5px 0px #b1b1b1;
            height: 1px;
            width: 100%;
            z-index: 0;
        }

        > div {
            /*float: left;*/
            /*width: 50%;*/
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .back {
            background-color: #fff;
        }

        .primary {
            color: #fff;
            background-color: #6D97FF;
        }
    }

    .next {
        padding: 0 .5rem;
        color: #ACB4C9;

        .el-button {
            width: 100%;
            margin: .3rem 0;
        }
    }
</style>
